<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <ul>
    <li>秦昊</li>
    <li>小沈阳</li>
    <li>赵本山</li>
    <li class="si">赵四</li>
    <li>刘能</li>
    <li>谢广坤</li>
  </ul>
  <script src="jquery-3.4.1.min.js"></script>
  <script>
    // 增加元素
    // 父元素.appendChild(子元素)
    // 父元素.insertBefore(子元素，参照物)

    // 父元素.append(新元素) 在元素内部的后面添加一个元素
    $("ul").append("<li>谢大脚</li>")
    //新元素.appendTo(父元素) 将元素添加父元素内部的后面
    $("<li>宋小宝</li>").appendTo($("ul"))


    //父元素.prepend(新元素) 在父元素内部的前面添加
    $("ul").prepend("<li>王长贵</li>")
    //新元素.prependTo(父元素) 将新元素添加到父元素内部的前面
    $("<li>谢飞机</li>").prependTo($("ul"))


    //参照物.after(新元素) 在参照物元素后添加
    $(".si").after("<li>赵玉田</li>")
    // 新元素.insertAfter(参照物)
    $("<li>王小蒙</li>").insertAfter($(".si"))


    // 参照物.before(新元素) 在参照物前添加新元素
    $(".si").before("<li>刘英</li>")
    //新元素.insertBefore(参照物)
    $("<li>李大国</li>").insertBefore($(".si"))

  </script>
</body>

</html>